//风格主题颜色
@mycolor:#00B2FF;//蓝色#00B2FF,橙色#FF7700
body{
	overflow: hidden;
	margin:0;
	padding:0;
}
.container.login{
	position: absolute;
    top: 50%;
    left: 50%;
    margin: -268px 0 0 -246px;
    padding: 10px 50px 12px;
    border-radius:5px;
	background: #fff;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	.loginbox{
		padding:1rem 1rem;
		.lghead{
			text-align:center;
			font-size:1.3rem;
			margin-bottom: .2rem;
		}
		.login_wrap {
		    padding:0 0 0 2rem;
		    position: relative;
		    margin: 0 auto;
		    border-bottom: 1px solid #F6F6F6;
		    &.tel{
		    	padding-right: 7rem;
		    	img{
		    		width: 1.2rem!important;
		    	}
		    }
		    &.ver{
		    	img{
		    		width: 1.3rem!important;
		    	}
		    }
		    .icon{
			    position: absolute;
			    left: 0;
			    top:50%;
			    text-align: center;
			    margin-top: -0.7rem;
			    img{
				    font-size: 2.5rem;
				    color: #808289;
				    width: 1.3rem;
				    display: inline-block;
				    vertical-align: middle;
	    			cursor: pointer;
				}
			}
			.input_text{
			    position: relative;
			    /*display: inline-block;*/
			    width: 100%;
			    overflow: hidden;
			    padding:.7rem 0 ;
			    input{
			    	width: 100%;
				    padding: 0 .5rem;
				    height: 2rem;
				    line-height: 2rem;
				    overflow-x: hidden;
				    overflow-y: auto;
				    font-size: 1rem;
				    color: #747474;
				    border:none;
				    -moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					-o-box-sizing: border-box;
					-ms-box-sizing: border-box;
					box-sizing: border-box;
					&.verify{
						width:60%;
						width:e("-moz-calc(100% - 6rem)");
						width:e("-webkit-calc(100% - 6rem)");
						width:e("calc(100% - 6rem)");
					}
			    }
			    #captcha-img{
					float:right;
			    	font-size:0;
			    }
			    #verifyCodeImg{
					width:3.5rem;
			    	height:1.5rem;
			    	margin-top:0.25rem;
			    }
			    .select{
					width: 100%;
				    padding: 0 .5rem;
				    height: 2rem;
				    line-height: 2rem;
				    overflow-x: hidden;
				    overflow-y: auto;
				    font-size: 1.1rem;
				    color: #747474;
				    border:none;
				    -moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					-o-box-sizing: border-box;
					-ms-box-sizing: border-box;
					box-sizing: border-box;
			    }
			}
			.verifybtn {
			    display: inline-block;
			    position: absolute;
			    float: right;
			    top:50%;
			    margin-top: -1.25rem;
			    right: .8rem;
			    line-height: 2.5rem;
			    font-size: 1.1rem;
			    text-align: center;
			    color: #3C3C3C;
			    padding-left:1rem;
			    &:before{
			    	content:'';
			    	position: absolute;
			    	top: 0;
			    	left: 0;
			    	height: 100%;
			    	border-left: 1px solid #F6F6F6;
			    }
			}
		}
		.agree{
		    position: relative;
		    height: 2rem;
		    line-height:2rem;
		    font-size: 1rem;
		    margin: 2rem 0;
		    
		    color: #3C3C3C;
		    #agreecheck{
		    	display: none;
		    }
		    #agreecheck:checked+label {
			    background: url(../images/6.png) no-repeat center left;
			    background-size: 1.3rem 1.3rem;
			}
		    label{
		    	background: url(../images/5.png) no-repeat center left;
			    background-size: 1.2rem 1.2rem;
			    padding-left: 1.85rem;
			    display: block;
			    span{
			    	color: #A2A2A2;
			    }
		    }
		}
		.loginbtn{
			margin-top: 1rem;
			a{
				display: block;
				height: 2.5rem;
				line-height: 2.5rem;
				width: 100%;
				font-size: 1rem;
				border-radius: 5px;
				background-color: mediumturquoise;
				color: #fff;
				text-align: center;
			}

		}
		.login_item{
			text-align: center;
			display: inline-block;
			padding:1rem;
			margin:2rem auto;
			border:2px solid #B0B0B0;
			border-radius: 50%;
			img{
				width: 5rem;
			}
		}
		.foget{
			margin:1rem 0 2.5rem;
			font-size: 1rem;
			text-align: right;
			a{
				color: #BDBDBD;
			}
		}
		.other{
			margin-top: .5rem;
			span{
				background-color: #fff;
				color: #aaa;
			}
			.type{
				text-align: center;
				a{
					text-align: center;
					display: inline-block;
					margin-right:2rem;
					&:last-child{
						margin-right:0;
					}
					span{
						font-size:0.7rem;
					}
				}
				i{
					display:block;
					margin:0 auto .5rem;
					width: 2.3rem;
					height: 2.3rem;
					border-radius: 50%;
				}
				.qq{
					background: url(../images/oauth/qq_icon.png) no-repeat center center;
					background-size: contain;
				}
				.weixin{
					background: url(../images/oauth/weixin_icon.png) no-repeat center center;
					background-size: contain;
				}
				.sina{
					background: url(../images/oauth/sina_icon.png) no-repeat center center;
					background-size: contain;

				}
			}
		}
	}
	.item_n{
		width: 95%;
		margin:0 auto;
		text-align: center;
		line-height: 2.5rem;
		color: #686868;
		position: relative;
		span{
			display: inline-block;
			position: relative;
			z-index: 33;
			padding:0 1rem;
			font-size: .7rem;
			line-height: .8rem;
		}
		img{
			height: 1.2rem;
			margin-right: .5rem;
			float: left;
			margin-top: .9rem;
		}
		&:before,&:after{
			content:'';
			width: 35%;
			height: 1px;
			position: absolute;
			top: 50%;
			left: 0;
			z-index: 22;
		}
		&:before{
 			background: -moz-linear-gradient(left, transparent 0, #ccc 100%) 0 100%;
		    background: -webkit-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(100%, #ccc));
		    background: -webkit-linear-gradient(left, transparent 0, #ccc 100%) 0 100%;
		    background: -o-linear-gradient(left, transparent 0, #ccc 100%) 0 100%;
		    background: linear-gradient(left, transparent 0, #ccc 100%) 0 100%;
		}
		&:after{
			right:0;
			left: auto;
		    background: -moz-linear-gradient(left, #ccc 0, transparent 100%) 0 100%;
		    background: -webkit-gradient(linear, left top, right top, color-stop(0, #ccc), color-stop(100%, transparent));
		    background: -webkit-linear-gradient(left, #ccc 0, transparent 100%) 0 100%;
		    background: -o-linear-gradient(left, #ccc 0, transparent 100%) 0 100%;
		    background: linear-gradient(left, #ccc 0, transparent 100%) 0 100%;
		}
	}
}


@media (max-width: 399px) { 
	html{ font-size: 15px;}
}
@media (min-width: 400px) { 
	html{ font-size: 16px;}
	.container.login{
	    margin: -299px 0 0 -245px;
	}
}
@media (min-width: 486px) { 
	html { font-size: 18px;}
	.container.login{
	    margin: -333px 0 0 -268px;
	}
}
@media (min-width: 536px) { 
	html { font-size: 20px;}
	.container.login{
	    margin: -262px 0 0 -257px;
	}
}
@media (max-width: 536px) {
	 .container.login{
	    top: 0;
	    left: 0;
	    right:0;
	    bottom:0;
	    margin:0;
	    padding: 20px 0 25px;
		background: #fff;
	 	width:100%;
	 	min-width:320px;
	 	border-radius:0;
	 	.loginbox{
			max-width:80%;
	 		margin:0 auto;
	 	}
	}
}